<template>
  <hr />
  <h2>查看（通过或拒绝）</h2>
  <h2 v-if="route.query.status == 2">已通过</h2>
  <h2 v-if="route.query.status == 3">拒绝</h2>
  <hr />
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="部门：" prop="departmentName">
      <el-select
        style="width: 180px"
        v-model="ruleForm.departmentName"
        placeholder="全部"
        clearable
        @change="bumen"
      >
        <el-option
          v-for="item in Department"
          :label="item.label"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="职位" prop="postsName" style="width: 280px">
      <el-select v-model="ruleForm.postsName" placeholder="请选择职位" @change="zhiwei">
        <el-option
          v-for="item in Position"
          :label="item.label"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="员工姓名" prop="employeeName" style="width: 400px">
      <el-select v-model="ruleForm.employeeName" placeholder="请选择姓名">
        <el-option
          v-for="item in tableEmployee"
          :label="item.employeeName"
          :value="item.employeeName"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="上级负责人" prop="superstratumCharge" style="width: 280px">
      <el-select v-model="ruleForm.superstratumCharge" placeholder="请选择上级负责人">
        <el-option label="李明" value="李明" />
        <el-option label="张三" value="张三" />
        <el-option label="王五" value="王五" />
      </el-select>
    </el-form-item>
    <el-form-item label="入职日期:" prop="dateonBoard">
      <el-date-picker
        v-model="ruleForm.dateonBoard"
        type="date"
        placeholder="请选择入职日期"
        clearable
      />
    </el-form-item>
    <el-form-item label="备注:">
      <el-input
        v-model="ruleForm.remarks"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="请输入备注信息"
      />
    </el-form-item>
  </el-form>
  <hr />
  <br />
  <h3>审批结果</h3>
  <el-table :data="tableData" border style="width: 800px">
    <el-table-column prop="result" label="审批结果" width="200" />
    <el-table-column prop="remarks" label="备注" width="200" />
    <el-table-column prop="approvalDate" label="审批时间" width="200" />
    <el-table-column prop="approvalName" label="审批人" width="200" />
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  entryId: route.query.id,
  departmentName: "",
  postsName: "",
  employeeName: "",
  superstratumCharge: "",
  dateonBoard: "",
  remarks: "",
  approvalEntry: '',
  createName: "",
  createDate: "",
  updateName: null,
  updateDate: null,
})
onMounted(() => {
  GetemployeeName();
  GetModelEntry();
  showMaterApp()
})

const Department = ref([
  { label: 'CEO', value: 1 },
  { label: '财务部', value: 2 },
  { label: '运营部', value: 3 },
  { label: '人事部', value: 4 },
  { label: '策划部', value: 5 },
])
const Positions = ref([
  { label: '董事长', value: 1 },
  { label: '财务部长', value: 2 },
  { label: '运营部长', value: 3 },
  { label: '人事部长', value: 4 },
  { label: '策划部长', value: 5 },
])
const Position = ref([]);



const bumen = (id: number) => {
  Position.value = Positions.value.filter(positions => positions.value == id);
  const selectedPosition = Department.value.find(position => position.value === id);
  if (selectedPosition) {
    ruleForm.departmentName = selectedPosition.label;
  }
}
const zhiwei = (id: number) => {
  const selectedPosition = Positions.value.find(position => position.value === id);
  if (selectedPosition) {
    ruleForm.postsName = selectedPosition.label;
  }
  GetemployeeName();
}


const submitForm = async (formEl: FormInstance | undefined) => {
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
}
  const tableEmployee = ref([]);
  ///员工姓名
  const GetemployeeName = () => {
    axios({
      method: "get",
      url: "empread/api/Employee/EmployeeEntryById",
      params: {
        postsId: ruleForm.postsName
      }
    })
      .then(res => {
        tableEmployee.value = res.data.data
      })
  }
  const GetModelEntry = () => {
    axios({
      method: "get",
      url: "empread/api/Entry/GetModelEntry",
      params: {
        id: ruleForm.entryId
      }
    })
      .then(res => {
        ruleForm.departmentName = res.data.data.departmentName
        ruleForm.postsName = res.data.data.postsName
        ruleForm.employeeName = res.data.data.employeeName
        ruleForm.superstratumCharge = res.data.data.superstratumCharge
        ruleForm.dateonBoard = res.data.data.dateonBoard
        ruleForm.remarks = res.data.data.remarks
        ruleForm.approvalEntry = res.data.data.approvalEntry
        ruleForm.createName = res.data.data.createName
        ruleForm.createDate = res.data.data.createDate
      })
  }

const tableData=ref([])
const showMaterApp=()=>{
    axios.get("empread/api/LoginShow/GetApproval?personnelId="+route.query.id+"&tableName="+"入职")
    .then(res=>{
        tableData.value=res.data.data
        console.log(tableData.value)
    })
}
</script>
